<template>
  <div class="library_home">
    <div class="library_home_main">
      <div class="main_head">
        <div class="head_title">
          <div @click="back">
            <van-icon name="arrow-left" />
          </div>
          <span class="title">{{ title }}</span>
        </div>
      </div>
      <SearchIpt></SearchIpt>
      <div class="topList" v-if="data.listType === '1'">
        <Song @open="openDialog" :topList="data.topList"></Song>
      </div>
      <div v-else>
        <Album :listType="data.listType" :list="data.topList" />
      </div>
    </div>

    <van-dialog
      v-model:show="showDialog"
      title="新建歌单"
      show-cancel-button
      @cancel="cancelHandle"
      @confirm="confirmPlayList"
    >
      <template v-slot:title>
        <div class="showDialog_title">新建标题（有样式）</div>
      </template>
      <template v-slot:default>
        <Field
        v-model="data.playlistName"
        label="歌单名称"
        placeholder="请输入"
      />
      </template>
      
    </van-dialog>
  </div>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Icon as vanIcon, Field, Toast } from "vant";
import {
  userPlaylist,
  albumSongsaleboard,
  mvAll,
  artistList,
  createPlaylist,
} from "@/apis/account/index.js";
import Song from "../components/song.vue";
import SearchIpt from "../components/searchIpt.vue";
import Album from "../components/Album.vue";
const data = reactive({
  main_bg: "",
  topList: [],
  artistList: [],
  searchTerm: "",
  listType: "2",
  playlistName: "",
});
const showDialog = ref(true);
const router = useRouter();
const route = useRoute();
// todo computed
const id = computed(() => route.query.id);
const title = computed(() => route.query.name);
// 我的播放列表
const userPlaylistHttps = async () => {
  const params = {
    uid: localStorage.getItem("uid"),
  };
  const res = await userPlaylist(params);
  data.topList = res.playlist;
  // console.log(res)
};
// 专辑
const albumHttps = async () => {
  //  daily:日榜,week:周榜,year:年榜,total:总榜
  const params = {
    type: "year",
  };
  const res = await albumSongsaleboard(params);
  data.topList = res.products;
  // console.log(res)
};
// mv
const mvAllHttps = async () => {
  const params = {
    area: "韩国", //地区,可选值为全部,内地,港台,欧美,日本,韩国,不填则为全部
    order: "最热", //上升最快,最热,最新
  };
  const res = await mvAll(params);
  data.topList = res.data;
};
// 歌手列表
const artistListHttps = async () => {
  const params = {
    type: "3",
    area: "16",
    limit: "10",
  };
  const res = await artistList(params);
  data.topList = res.artists;
  console.log(res);
};
const init = () => {
  if (id.value == "3000") {
    data.listType = "1";
    userPlaylistHttps();
  } else if (id.value == "3003") {
    artistListHttps();
    data.listType = "3";
  } else {
    if (id.value === "3001") {
      albumHttps();
    } else if (id.value === "3002") {
      mvAllHttps();
    }
    data.listType = "2";
  }
};
init();

const tabsClick = () => {};
const back = () => {
  router.back();
};
const createPlaylistHttps = async () => {
  console.log(Date.now());
  const params = {
    name: data.playlistName,
    timestamp: Date.now(),
  };
  try {
    const res = await createPlaylist(params);
    userPlaylistHttps();
  } catch (err) {
    Toast.fail("新建失败");
  }
};
const confirmPlayList = () => {
  console.log(data.playlistName);
  createPlaylistHttps();
  // showDialog.value = false;
};
const cancelHandle = () => {
  data.playlistName = "";
  showDialog.value = false;
};
const openDialog = () => {
  showDialog.value = true;
};
</script>
<style lang="less" scoped>
.library_home {
  width: 100%;
  min-height: 100vh;
  font-family: AppleSystemUIFont;
  color: #eeeeee;
  background-color: #0e0b1f;
  padding-bottom: 40px;
  &_bg {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
    }
  }
  &_main {
    width: 100%;
    min-height: 100vh;
    .main_head {
      font-size: 18px;
      padding: 16px 18px;
      padding-bottom: 0;
      .head_title {
        width: 100%;
        display: flex;

        align-items: center;
        .icon-icarrowleft {
          font-size: 16px;
        }
        .title {
          display: inline-block;
          width: 100%;
          text-align: center;
        }
      }
    }

    .topList {
      width: 327px;
      margin: 0 auto;
      margin-top: 32px;
    }
  }
  .showDialog_title {
    color: #333;
    padding-bottom: 20px;
    font-weight: 600;
    font-size: 24px;
  }
}
</style>
